<template>
  <div class="app-container">
    <PlatformHeader />
    <div class="main-container" :style="{ height: `calc(100vh - 72px)` }">
      <!-- 左侧面板 -->
      <div
        class="left-panel"
        :class="{ 'hidden': leftPaneSize === 0 }"
        :style="{ width: `${leftPaneSize}%` }"
      >
        <div class="head-container">
          <el-input
            v-model="deptName"
            placeholder="请输入机构名称"
            clearable
            size="small"
            prefix-icon="el-icon-search"
            style="margin-bottom: 20px"
          />
        </div>
        <div class="head-container">
          <el-tree
            :data="deptOptions"
            :props="defaultProps"
            :expand-on-click-node="false"
            :filter-node-method="filterNode"
            ref="tree"
            node-key="id"
            default-expand-all
            highlight-current
            @node-click="handleNodeClick"
          />
        </div>
      </div>

      <!-- 右侧主内容区 -->
      <div class="right-panel">
        <button
          class="toggle-btn"
          @click="toggleLeftPane"
          :style="{ left: leftPaneSize === 0 ? '10px' : `${leftPaneSize}%` }"
        >
          <i class="el-icon-s-fold" v-if="leftPaneSize > 0"></i>
          <i class="el-icon-s-unfold" v-else></i>
        </button>

        <el-col style="height: 100%;display: flex;flex-direction: column">
          <el-form
            :model="form"
            ref="queryForm"
            size="small"
            :inline="true"
            v-show="showSearch"
            label-width="90px"
            :rules="formRules"
            class="custom-form"
            style="padding-top: 30px;box-sizing: border-box"
          >
            <el-form-item label="机构" prop="deptId" required>
              <el-input
                v-model="selectedNodeInfo"
                placeholder="请从左侧选择机构"
                readonly
                clearable
                style="width: 220px;background-color: transparent;"
                @focus="handleInputFocus"
              />
            </el-form-item>

            <el-form-item label="日期范围" prop="dateRange" required>
              <el-date-picker
                popper-class="custom-select-dropdown"
                v-model="form.dateRange"
                style="width: 260px"
                value-format="yyyy-MM-dd"
                type="daterange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="pickerOptions"
                @change="handleDateChange"
              />
            </el-form-item>

            <el-form-item label="人群分类" prop="population" required>
              <el-select
                v-model="form.population"
                placeholder="请选择人群"
                clearable
                @change="handlePopulationChange"
                style="width: 140px"
                popper-class="custom-select-dropdown"
              >
                <el-option
                  v-for="item in populationOptions"
                  :key="item.id"
                  :label="item.peopletypename"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>

            <el-form-item label="年龄组">
              <el-select
                v-model="form.ageGroup"
                placeholder="请选择年龄组"
                clearable
                :disabled="!form.population"
                @change="handleAgeGroupChange"
                style="width: 160px"
                popper-class="custom-select-dropdown"
              >
                <el-option
                  v-for="item in ageGroupOptions"
                  :key="item.id"
                  :label="item.peaplegroupname"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>

            <el-form-item label="性别">
              <el-select
                v-model="form.sex"
                placeholder="请选择性别"
                clearable
                style="width: 100px"
                popper-class="custom-select-dropdown"
              >
                <el-option
                  v-for="item in genderOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>

            <el-form-item>
              <el-button
                type="primary"
                icon="el-icon-search"
                size="mini"
                @click="handleQuery"
                class="search-btn action-btn"
                :disabled="!isFormValid"
              >查询</el-button>
              <el-button icon="el-icon-refresh" size="mini" class="reset-btn action-btn" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-form>

          <div v-if="showCharts" class="chart-container">
            <!-- 添加唯一key，确保数据更新时重新渲染表格 -->
            <el-table
              :key="tableKey"
              v-loading="loading"
              :data="tableData"
              style="width: 100%; margin-top: 20px; flex: 1;"
              border
              stripe
              class="custom-table"
              :header-cell-style="{background:'#f7e797',color:'#606266',borderRadius:'0',height:'0px'}"
              ref="dataTable"
              height="100%"
            >
              <!-- 地区列 - 固定宽度避免动态变化 -->
              <el-table-column
                label="地区"
                align="center"
                prop="name"

                width="150"
              />

              <!-- 动态生成指标列 -->
              <template v-for="(title, titleIndex) in apiData.titleList">
                <el-table-column :key="titleIndex" :label="title" align="center">
                  <el-table-column
                    v-for="(subTitle, subIndex) in getSubTitlesForTitle(titleIndex)"
                    :key="`${titleIndex}-${subIndex}`"
                    :prop="getFieldName(titleIndex, subIndex)"
                    :label="subTitle.title"
                    align="center"
                    width="100"
                  />
                </el-table-column>
              </template>
            </el-table>
          </div>
        </el-col>
      </div>
    </div>
  </div>
</template>

<script>
import { deptTreeSelect } from "@/api/system/user";
import PlatformHeader from '../../../components/PlatformHeader/index.vue';
import {
  getPeopletypelist,
  getPeoplegroup,
  getItemecount
} from "../../../api/monitormanage/indicator";

export default {
  name: "IndicatorStatistics",
  components: {
    PlatformHeader
  },
  data() {
    const validateDateRange = (rule, value, callback) => {
      if (!value || value.length !== 2) {
        callback(new Error('请选择完整的日期范围'));
      } else {
        const startDate = new Date(value[0]);
        const endDate = new Date(value[1]);
        if (startDate.getFullYear() !== endDate.getFullYear()) {
          callback(new Error('开始日期和结束日期必须在同一年内'));
        } else {
          callback();
        }
      }
    };
// 获取默认日期范围
    const getDefaultDateRange = () => {
      const today = new Date();
      const currentYear = today.getFullYear();
      const startDate = `${currentYear}-01-01`;
      const endDate = today.toISOString().split('T')[0];
      return [startDate, endDate];
    };

    const defaultRange = getDefaultDateRange();
    return {
      leftPaneSize: 0,
      startYear: null,
      form: {
        deptId: undefined,
        dateRange: defaultRange,
        population: '',
        ageGroup: undefined,
        sex: '',
        starttime: defaultRange[0],
        endtime: defaultRange[1],
        ageMin: 3,
        ageMax: 7
      },
      loading: true,
      showSearch: true,
      showCharts: false,
      deptOptions: undefined,
      deptName: undefined,
      errorMessage: '',
      // 日期选择器配置
      pickerOptions: {
        disabledDate: (time) => {
          // 如果没有选择开始日期或者已经清除了选择，只禁用未来日期
          if (!this.startYear) {
            return time.getTime() > Date.now();
          }

          // 如果已经选择了开始日期，限制只能选择同一年份
          const timeYear = time.getFullYear();
          return time.getTime() > Date.now() || timeYear !== this.startYear;
        },
        onPick: ({ maxDate, minDate }) => {
          if (minDate) {
            // 保存选中的开始日期年份
            this.startYear = minDate.getFullYear();
          } else {
            // 如果没有选择日期，清除年份限制
            this.startYear = null;
          }
        },
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        },{
          text: '本年至今', //
          onClick(picker) {
            const end = new Date();
            const start = new Date(end.getFullYear(), 0, 1);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      defaultProps: {
        children: "children",
        label: "label"
      },
      formRules: {
        deptId: [
          { required: true, message: '请选择机构', trigger: ['change', 'blur'] }
        ],
        dateRange: [
          { validator: validateDateRange, trigger: ['change', 'blur'] }
        ],
        population: [
          { required: true, message: '请选择人群分类', trigger: ['change', 'blur'] }
        ]
      },
      selectedNodeInfo: '',
      populationOptions: [],
      ageGroupOptions: [],
      genderOptions: [
        { value: '', label: '全部' },
        { value: '男', label: '男' },
        { value: '女', label: '女' }
      ],
      apiData: {
        titleList: [],
        titleList2: [],
        data: []
      },
      tableData: [],
      lastQueryParams: null,
      queryTimer: null,
      // 表格唯一标识，用于强制重新渲染
      tableKey: 0
    };
  },
  computed: {
    isFormValid() {
      return this.form.deptId && this.form.dateRange && this.form.population;
    },
    currentQueryParams() {
      return {
        deptId: this.form.deptId,
        starttime: this.form.starttime,
        endtime: this.form.endtime,
        population: this.form.population,
        ageGroup: this.form.ageGroup,
        sex: this.form.sex
      };
    },
    queryParamsChanged() {
      if (!this.lastQueryParams) return true;
      return JSON.stringify(this.currentQueryParams) !== JSON.stringify(this.lastQueryParams);
    }
  },
  watch: {
    deptName(val) {
      this.$refs.tree.filter(val);
    },
    'form.population'(newVal) {
      if (newVal) {
        const selectedPopulation = this.populationOptions.find(item => item.id === newVal);
        if (selectedPopulation) {
          this.form.ageMin = selectedPopulation.peopleagemin;
          this.form.ageMax = selectedPopulation.peopleagemax;
          this.getAgeGroups(newVal);
        }
      } else {
        this.form.ageGroup = undefined;
        this.ageGroupOptions = [];
        this.form.ageMin = undefined;
        this.form.ageMax = undefined;
      }
    }
  },
  methods: {
    toggleLeftPane() {
      this.leftPaneSize = this.leftPaneSize === 0 ? 16 : 0;
    },
    handleInputFocus() {
      this.leftPaneSize = 16;
    },
    getDeptTree() {
      deptTreeSelect().then(response => {
        this.deptOptions = response.data;

        this.form.deptId = response.data[0].id
        this.selectedNodeInfo = response.data[0].label
      });
    },
    getPopulationTypes() {
      getPeopletypelist().then(response => {
        this.populationOptions = response;
      });
    },
    // 设置默认人群分类
    setDefaultPopulation() {
      if (this.populationOptions && this.populationOptions.length > 0) {
        // 查找"幼儿"选项
        const childPopulation = this.populationOptions.find(item =>
          item.peopletypename === '幼儿' || item.peopletypename.includes('幼儿')
        );

        if (childPopulation) {
          this.form.population = childPopulation.id;
          // 触发人群分类变化，自动加载对应的年龄组
          this.handlePopulationChange(childPopulation.id);
        } else {
          // 如果没有找到"幼儿"，使用第一个选项作为默认值
          this.form.population = this.populationOptions[0].id;
          this.handlePopulationChange(this.populationOptions[0].id);
        }
      }
    },
    getAgeGroups(peopleTypeId) {
      getPeoplegroup(peopleTypeId).then(response => {
        const allAgeGroup = {
          id: 'all',
          peaplegroupname: '全部',
          agemin: this.populationOptions.find(item => item.id === peopleTypeId)?.peopleagemin,
          agemax: this.populationOptions.find(item => item.id === peopleTypeId)?.peopleagemax
        };
        this.ageGroupOptions = [allAgeGroup, ...response];
        this.form.ageGroup = 'all';
        this.handleAgeGroupChange('all');
      });
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    handleNodeClick(data) {
      this.form.deptId = data.id;
      this.selectedNodeInfo = `${data.label} `;
      this.leftPaneSize = 0;
      this.$refs.queryForm.clearValidate(['deptId']);
    },
    handleDateChange(val) {
      if (val && val.length === 2) {
        this.form.starttime = val[0];
        this.form.endtime = val[1];
        const startDate = new Date(val[0]);
        const endDate = new Date(val[1]);
        if (startDate.getFullYear() !== endDate.getFullYear()) {
          this.errorMessage = '错误：开始日期和结束日期必须在同一年内！';
          this.form.dateRange = [];
          this.form.starttime = undefined;
          this.form.endtime = undefined;
          this.startYear = null;
        } else {
          this.errorMessage = '';
          this.startYear = startDate.getFullYear();
          this.$refs.queryForm.clearValidate(['dateRange']);
        }
      } else {
        this.form.starttime = undefined;
        this.form.endtime = undefined;
        this.form.dateRange = null;
        this.errorMessage = '';
        this.startYear = null;
      }
    },
    handlePopulationChange(value) {
      this.form.population = value;
      this.form.ageGroup = undefined;
      this.$refs.queryForm.clearValidate(['population']);
    },
    handleAgeGroupChange(value) {
      if (value) {
        const selectedAgeGroup = this.ageGroupOptions.find(item => item.id === value);
        if (selectedAgeGroup) {
          this.form.ageMin = selectedAgeGroup.agemin;
          this.form.ageMax = selectedAgeGroup.agemax;
        }
      } else {
        const selectedPopulation = this.populationOptions.find(item => item.id === this.form.population);
        if (selectedPopulation) {
          this.form.ageMin = selectedPopulation.peopleagemin;
          this.form.ageMax = selectedPopulation.peopleagemax;
        }
      }
    },
    getSubTitlesForTitle(titleIndex) {
      const titlesPerCategory = this.apiData.titleList2.length / this.apiData.titleList.length;
      const startIndex = titleIndex * titlesPerCategory;
      return this.apiData.titleList2.slice(startIndex, startIndex + titlesPerCategory);
    },
    getFieldName(titleIndex, subIndex) {
      const titlesPerCategory = this.apiData.titleList2.length / this.apiData.titleList.length;
      const fieldIndex = titleIndex * titlesPerCategory + subIndex;
      return this.apiData.titleList2[fieldIndex]?.field;
    },
    handleQuery() {
      this.$refs.queryForm.validate(valid => {
        if (valid) {
          this.showCharts = true;
          this.loading = true;

          const queryParams = {
            deptid: this.form.deptId,
            starttime: this.form.starttime,
            endtime: this.form.endtime,
            sex: this.form.sex,
            year: this.form.starttime.substring(0, 4),
            ageMin: this.form.ageMin,
            ageMax: this.form.ageMax
          };

          getItemecount(queryParams).then(response => {
            this.apiData = response;
            // 更新表格前先清空并更新key，强制重新渲染
            this.tableData = [];
            this.tableKey += 1;

            // 使用nextTick确保DOM更新后再填充数据
            this.$nextTick(() => {
              this.tableData = this.apiData.data;
              this.loading = false;

              // 数据加载完成后触发表格布局更新
              this.$nextTick(() => {
                if (this.$refs.dataTable) {
                  this.$refs.dataTable.doLayout();
                }
              });
            });
          });
        }
      });
    },
    resetQuery() {
      this.form = {
        deptId: undefined,
        dateRange: null,
        population: undefined,
        ageGroup: undefined,
        sex: '',
        starttime: undefined,
        endtime: undefined,
        ageMin: undefined,
        ageMax: undefined
      };
      this.selectedNodeInfo = '';
      this.showCharts = false;
      this.tableData = [];
      this.lastQueryParams = null;
      this.startYear = null;
      this.ageGroupOptions = [];
      this.tableKey = 0; // 重置表格key
      this.$refs.tree.setCurrentKey(null);
      this.$nextTick(() => {
        this.$refs.queryForm.clearValidate();
      });

      if (this.queryTimer) {
        clearTimeout(this.queryTimer);
        this.queryTimer = null;
      }
    }
  },
  created() {
    this.getDeptTree();
    this.getPopulationTypes();

    // 设置默认人群分类为"幼儿"
    this.$nextTick(() => {
      // 等待人群分类数据加载完成后设置默认值
      setTimeout(() => {
        this.setDefaultPopulation();
        this.handleQuery();
      }, 500);
    });
  }
};
</script>

<style scoped lang="scss">
.app-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  overflow: hidden;
  background: url('../../assets/images/bgn.png');
  background-size: 100% 100%;
  padding: 16px;
  box-sizing: border-box;
  padding-top: 0;
}

.main-container {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.left-panel {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background-color: #0160FA;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
  z-index: 10;
  transition: width 0.3s ease;
  overflow: auto;
  padding: 16px;
  box-sizing: border-box;
}

.left-panel.hidden {
  width: 0 !important;
  padding: 0;
}

.right-panel {
  width: 100%;
  height: 100%;
  padding-left: 0;
  transition: padding-left 0.3s ease;
  box-sizing: border-box;
  overflow: auto;
}

.toggle-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 30px;
  background-color: rgba(0,128,255,0.3);
  border: 1px solid #0080ff;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transition: left 0.3s ease;
}

.toggle-btn i {
  color: #fff;
  font-size: 10px;
}

.custom-form {
  .el-form-item {
    margin-right: 20px;
    margin-bottom: 18px;
  }

  .el-form-item__label {
    white-space: nowrap;
    padding-right: 8px;
    color: #fff!important;
  }
  ::v-deep .el-form-item__label {
    color: #fff;
  }
  .el-input, .el-select, .el-date-editor {
    width: 220px;
  }

  .el-date-editor.el-input, .el-date-editor.el-input__inner {
    width: 260px;
  }
}

.chart-container {
 /* margin-top: 10px;
  margin-bottom: 20px;*/
  padding: 0px;
  background-color: transparent;
  border-radius: 4px;
  /*box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);*/
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  background-size: 100% 100%;
}

::v-deep .el-tree {
  background: #0080FF;
  color: #fff;
  border-radius: 8px;
}
::v-deep .el-tree-node__content:hover {
  background-color: #0879e9;
}
::v-deep .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
  background-color: #0879e9;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track{
  border-radius: 4px;
  background-color: rgba(240, 240, 240, 0.3);
}

::-webkit-scrollbar-thumb{
  border-radius: 8px;
  background-color: rgba(0, 128, 255, 0.5);
}

::-webkit-scrollbar-thumb:hover{
  background-color: rgba(0, 128, 255, 0.7);
}
::v-deep {
  .is-horizontal {
    height: 0px;
    left: 0px;
    display: none;
  }
}

::v-deep .el-input .el-input__inner {
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid #00CCFE;
  border-radius: 6px;
  color: #f0f0f0;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  font-size: 14px;
}

::v-deep .el-input__inner::placeholder {
  color: #fff !important;
}

::v-deep .el-input .el-input__inner:focus {
  border-color: #409eff;
  box-shadow: 0 0 5px rgba(64, 158, 255, 0.6);
  background-color: rgba(255, 255, 255, 0.15);
  color: #fff;
}

::v-deep .el-form-item .el-button {
  border-radius: 22px;
  font-weight: 600;
  font-size: 15px;
  padding: 10px 28px;
  transition: all 0.3s ease;
  box-shadow: 0 3px 8px rgba(66, 133, 244, 0.3);
}

::v-deep .el-form-item .el-button--primary {
  background: linear-gradient(45deg, #409eff, #66b1ff);
  border: none;
  color: #fff;
  box-shadow: 0 5px 14px rgba(64, 158, 255, 0.6);
}

::v-deep .el-form-item .el-button--primary:hover {
  background: linear-gradient(45deg, #66b1ff, #409eff);
  box-shadow: 0 7px 18px rgba(64, 158, 255, 0.8);
}

/*::v-deep .el-form-item .el-button:not(.el-button--primary) {
  background: transparent;
  color: #409eff;
  border: 1.8px solid #409eff;
  box-shadow: none;
}*/

/*::v-deep .el-form-item .el-button:not(.el-button--primary):hover {
  background: #e6f0ff;
  border-color: #66b1ff;
  color: #409eff;
  box-shadow: 0 0 10px rgba(102, 177, 255, 0.7);
}*/

::v-deep .el-date-editor {
  background-color: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid #00CCFE !important;
  border-radius: 6px;
  color: #f0f0f0 !important;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

::v-deep .el-date-editor:hover {
  border-color: #409eff !important;
}

::v-deep .el-date-editor .el-range-input {
  background-color: transparent !important;
  color: #fff !important;
}

::v-deep .el-date-editor .el-range-separator {
  color: rgba(255, 255, 255, 0.8) !important;
}

::v-deep .el-date-editor .el-range-input::placeholder {
  color: #fff !important;
}

::v-deep .el-date-editor input::placeholder {
  color: #fff !important;
}

::v-deep(.el-table__header-wrapper) .el-table__header th {
  background-color: #f5f7fa;
  font-weight: bold;
}

::v-deep(.el-table .el-table__cell) {
  padding: 8px 0;
}

::v-deep(.small-padding.fixed-width) {
  width: 120px;
}

::v-deep(.el-table__header .el-table__cell) {
  background-color: #f5f7fa;
}

::v-deep(.el-table__fixed-right, .el-table__fixed) {
  height: 100% !important;
}

/* 新增表格样式优化 */
::v-deep .el-table {
  display: flex;
  flex-direction: column;
  height: 100%;
}

::v-deep .el-table__body-wrapper {
  flex: 1;
  overflow: auto;
}

::v-deep .el-table .el-table__fixed-right {
  height: 100% !important;
}

::v-deep .el-table--scrollable-x .el-table__body-wrapper {
  overflow-x: auto;
}

::v-deep .el-table--scrollable-y .el-table__body-wrapper {
  overflow-y: auto;
}
/* 表格整体容器 */
::v-deep .el-table {
  background: transparent;
  border-radius: 12px;
  overflow: hidden;

  /* 表头圆角 */
  .el-table__header-wrapper {
    border-radius: 12px;
    overflow: hidden;
  /*  height: 50px; !* 表头行高度 *!*/

    th:first-child {
      border-top-left-radius: 12px;
  /*    line-height: 30px; !* 表头文字行高 *!
      padding: 10px 8px; !* 表头单元格内边距 *!*/
    }
    th:last-child {
      border-top-right-radius: 12px;
    /*  line-height: 30px; !* 表头文字行高 *!
      padding: 10px 8px; !* 表头单元格内边距 *!*/
    }
  }
  /* 表格行圆角 */
  .el-table__body-wrapper {
    border-radius: 0 0 12px 12px;

    tr {
      td:first-child {
        border-bottom-left-radius: 12px;
      }
      td:last-child {
        border-bottom-right-radius: 12px;
      }
    }

    /* 为每一行添加圆角 */
    tr.el-table__row {
      td:first-child {
        border-top-left-radius: 12px;
        border-bottom-left-radius: 12px;
      }
      td:last-child {
        border-top-right-radius: 12px;
        border-bottom-right-radius: 12px;
      }
    }
  }
}
/* 确保表头单元格没有边框干扰圆角 */
::v-deep .el-table th.el-table__cell {
  border: none;
  padding: 2px 0;
}
.el-table::before{
  height: 0;
}
::v-deep .el-table th.el-table__cell.is-leaf{
  border-bottom: none;
}
/* 表头 - 深蓝到青绿，柔和渐变 */
::v-deep .el-table th {
  background: #f7e797;
  color: #1e4f91; // 更深的蓝
  font-weight: bold;
  font-size: 18px;
  height: 30px;
  line-height: 30px;
}
/* 奇偶行 - 亮蓝与浅青 */
::v-deep .el-table__row {
  td {
    border: none; /* 移除单元格边框 */
  }
}

/* 奇偶行 - 亮蓝与浅青 */
::v-deep .el-table__row:nth-child(odd) {
  background: linear-gradient(90deg, #99e8ff, #4f85ff);
}
::v-deep .el-table__row:nth-child(even) {
  background: linear-gradient(90deg, #4f85ff, #99e8ff);
}

/* 单元格文字 */
::v-deep .el-table td {
  color: #000; /* 深灰色，更易读 */
  font-size: 18px;
  padding: 12px 8px;
}
::v-deep .el-table__body {
  border-collapse: separate !important;
  border-spacing: 0 5px !important;
}
/* 鼠标悬停 - 橙黄渐变 */
::v-deep .el-table__body tr:hover > td {
  background: #9ef7c5!important;
  // transition: background 0.25s ease;
}

/* 操作栏按钮文字颜色 - 黑色 */
::v-deep .el-table .el-button--mini {
  color: #000 !important; /* 文字颜色改为纯黑 */
  font-size: 18px;
  font-weight: 400;
}
::v-deep .el-table .cell{
  line-height: 35px;
  height: 35px;
}
/* 表格整体 */

/* 分页栏美化 */
::v-deep .pagination {
  margin-top: 16px;
  padding: 10px 0;
  background-color: #f8fbff;
  border-radius: 8px;
}
::v-deep .pagination-container{
  background: transparent;
}
::v-deep .el-pagination{
  color: #fff!important;
}
::v-deep .el-pagination__total{
  color: #fff!important;
}
::v-deep .el-pagination__jump{
  color: #fff!important;
}

/* 美化 el-input 输入框 */
::v-deep .el-input .el-input__inner {
  background-color: rgba(255, 255, 255, 0.1); /* 半透明白背景 */
  border: 1px solid #00CCFE; /* 柔和的蓝色边框 */
  border-radius: 6px;
  color: #f0f0f0;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  font-size: 16px;
}

/* 输入框 placeholder 颜色改为 #fff */
::v-deep .el-input__inner::placeholder {
  color: #fff !important;
}

/* 输入框获得焦点时边框高亮 */
::v-deep .el-input .el-input__inner:focus {
  border-color: #409eff; /* element-ui 默认蓝色 */
  box-shadow: 0 0 5px rgba(64, 158, 255, 0.6);
  background-color: rgba(255, 255, 255, 0.15);
  color: #fff;
}

/* 清除按钮的颜色调整 */
::v-deep .el-input__clear {
  color: #a8c0ff;
}

/* 清除按钮 hover 颜色 */
::v-deep .el-input__clear:hover {
  color: #409eff;
}

/* 搜索区按钮美化 - 调大尺寸 */
::v-deep .el-form-item .el-button {
  border-radius: 22px;
  font-weight: 600;
  font-size: 16px;       /* 字号变大 */
  padding: 10px 28px;    /* 内边距加大 */
  transition: all 0.3s ease;
  box-shadow: 0 3px 8px rgba(66, 133, 244, 0.3);
}

/* 通用按钮基础样式 */
.el-button {
  font-size: 14px;
  padding: 10px 20px; /* 比默认稍大 */
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.25s ease;
}

/* 美化日期选择框 */
::v-deep .el-date-editor {
  background-color: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid #00CCFE !important;
  border-radius: 6px;
  color: #f0f0f0 !important;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

::v-deep .el-date-editor:hover {
  border-color: #409eff !important;
}

::v-deep .el-date-editor .el-range-input {
  background-color: transparent !important;
  color: #fff !important;
}

::v-deep .el-date-editor .el-range-separator {
  color: rgba(255, 255, 255, 0.8) !important;
}

/* 日期选择框 placeholder 颜色改为白色 */
::v-deep .el-date-editor .el-range-input::placeholder {
  color: #fff !important;
}

/* 单个日期选择框（非范围） placeholder 颜色 */
::v-deep .el-date-editor input::placeholder {
  color: #fff !important;
}

/* 统一弹窗里的 el-input、el-select 样式 */
::v-deep .el-dialog .el-input__inner,
::v-deep .el-dialog .el-select .el-input__inner {
  color: #000 !important;
  border: 1px solid rgba(79, 133, 255, 0.3);
}

::v-deep .el-dialog .el-input__inner:focus {
  border-color: #409eff !important;
  box-shadow: 0 0 5px rgba(64, 158, 255, 0.6) !important;
  background-color: rgba(255, 255, 255, 0.15) !important;
}
/* 调整表单里的按钮间距 */
::v-deep .el-form-item .el-button {
  margin-left: 12px; /* 你可以改成 16px 更宽松 */
}
/* 按钮通用样式（不改尺寸） */
::v-deep .el-form-item .action-btn {
  border-radius: 20px; /* 圆润 */
  font-weight: 600;
  border: none;
  transition: all 0.3s ease;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}

/* 悬浮时按钮微微上浮 + 光晕 */
::v-deep .el-form-item .action-btn:hover {
  transform: translateY(-2px);
}

/* 搜索按钮 - 宝石蓝渐变 */
::v-deep .el-form-item .search-btn {
  background: linear-gradient(135deg, #b4cdeb, #2f6bcc);
  color: #fff;
}
::v-deep .el-form-item .search-btn:hover {
  background: linear-gradient(135deg, #5aa2f8, #3a8ef6);
  box-shadow: 0 6px 14px rgba(58, 142, 246, 0.5);
}

/* 重置按钮 - 高级灰蓝 */
::v-deep .el-form-item .reset-btn {
  background: linear-gradient(135deg, #df9f3f, #edc73d);
  color: #fff;
}
::v-deep .el-form-item .reset-btn:hover {
  background: linear-gradient(135deg, #ffcc80, #ffb74d);
  box-shadow: 0 6px 14px rgba(255, 183, 77, 0.5);
}

/* 新增按钮 - 蓝绿色渐变 */
::v-deep .el-form-item .add-btn {
  background: linear-gradient(135deg, #4fd1c5, #38b2ac);
  color: #fff;
}
::v-deep .el-form-item .add-btn:hover {
  background: linear-gradient(135deg, #6ee7df, #4fd1c5);
  box-shadow: 0 6px 14px rgba(72, 187, 176, 0.5);
}

/* 修改按钮 - 青柠绿渐变 */
::v-deep .el-form-item .edit-btn {
  background: linear-gradient(135deg, #8bc34a, #6fa33f);
  color: #fff;
}
::v-deep .el-form-item .edit-btn:hover {
  background: linear-gradient(135deg, #a8d672, #8bc34a);
  box-shadow: 0 6px 14px rgba(139, 195, 74, 0.5);
}

/* 删除按钮 - 胭脂红渐变 */
::v-deep .el-form-item .delete-btn {
  background: linear-gradient(135deg, #e57373, #c62828);
  color: #fff;
}
::v-deep .el-form-item .delete-btn:hover {
  background: linear-gradient(135deg, #ef9a9a, #e57373);
  box-shadow: 0 6px 14px rgba(229, 115, 115, 0.5);
}

/* 导出按钮 - 金橙渐变 */
::v-deep .el-form-item .export-btn {
  background: linear-gradient(135deg, #1ec2e7, #54a9ff);
  color: #fff;
}
::v-deep .el-form-item .export-btn:hover {
  background: linear-gradient(135deg, #7cdde7, #2989e9);
  box-shadow: 0 6px 14px rgba(160, 180, 200, 0.5);
}
::v-deep ::-webkit-scrollbar {
  width: 2px;
  height: 6px;
}
/* 对话框整体样式 - 添加渐变背景 */
::v-deep .custom-dialog {
  border-radius: 16px !important;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  background: linear-gradient(145deg, #f5f7fa, #e4e8f0);

  .el-dialog__header {
    background: linear-gradient(90deg, #8caefb, #0160FA);
    padding: 20px;
    margin: 0;
    border-bottom: none;

    .el-dialog__title {
      color: #fff;
      font-size: 20px;
      font-weight: 600;
      letter-spacing: 1px;
    }

    .el-dialog__headerbtn {
      top: 20px;
      right: 20px;

      .el-dialog__close {
        color: #fff;
        font-size: 20px;
      }
    }
  }

  /* 修改body部分为渐变 */
  .el-dialog__body {
    padding: 45px 40px 10px 40px;
    background: linear-gradient(145deg, #e6f0ff, #bad2ff);
    color: #333; /* 文字颜色调整 */
  }

  /* 修改footer部分为渐变 - 与body同色系但略深 */
  .el-dialog__footer {
    padding: 20px 40px;
    background: linear-gradient(145deg, #e6f0ff, #a2c3ff);
    border-top: 1px solid rgba(79, 133, 255, 0.1); /* 半透明分割线 */
    border-radius: 0 0 16px 16px;
  }
}

/* 表单元素样式调整以适应新背景 */
::v-deep .custom-input {
  .el-input__inner {
    background-color: rgba(255, 255, 255, 0.1); /* 半透明白底 */
    border: 1px solid rgba(79, 133, 255, 0.3);
    color: #000;

    &:focus {
      border-color: #4f85ff;
      background-color: #fff;
      box-shadow: 0 0 0 2px rgba(79, 133, 255, 0.2);
    }
  }
}
::v-deep .custom-input.el-input .el-input__inner{
  border: 1px solid rgba(79, 133, 255, 0.3);
}
::v-deep .vue-treeselect:not(.vue-treeselect--disabled):not(.vue-treeselect--focused) .vue-treeselect__control:hover{
  border: 1px solid rgba(79, 133, 255, 0.3);
}
/* 单选按钮组样式调整 */
::v-deep .custom-radio-group {
  .custom-radio {
    .el-radio__label {
      color: #555; /* 加深文字颜色 */
    }
  }
}

/* 按钮样式微调以匹配新背景 */
/* 对话框底部按钮居中样式 */
.dialog-footer {
  display: flex;
  justify-content: center; /* 改为居中 */
  align-items: center;
  gap: 20px; /* 添加按钮间距 */

  .el-button {
    min-width: 120px; /* 稍微加大按钮宽度 */
    height: 40px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 1px;
    transition: all 0.3s;
    margin: 0; /* 移除原来的margin-left */
  }

  .dialog-cancel-btn {
    border: none;
    background: linear-gradient(135deg, #aed7ff, #80bcf9);
    color: #fff;
    font-size: 16px;
    box-shadow: 0 6px 14px rgb(128 188 249 / 50%);
    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }
  }

  .dialog-confirm-btn {
    background: linear-gradient(90deg, #4f85ff, #6a8cff);
    border: none;
    color: #fff;
    font-size: 16px;
    box-shadow: 0 6px 14px rgb(128 188 249 / 50%);
    &:hover {
      background: linear-gradient(90deg, #3a73ff, #4f85ff);
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(79, 133, 255, 0.3);
    }

    &:active {
      transform: translateY(0);
    }
  }
}
::v-deep .custom-dialog .el-input__inner::placeholder {
  color: #555 !important;
  font-size: 14px;
}
::v-deep .custom-dialog .vue-treeselect__control{
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(79, 133, 255, 0.3);
}
::v-deep .vue-treeselect__placeholder{
  color: #555;
}
/* 响应式调整 */
@media (max-width: 768px) {
  ::v-deep .custom-dialog {
    width: 90% !important;

    .el-dialog__body {
      padding: 20px;
    }

    .el-form-item {
      margin-bottom: 18px;
    }

    .el-col {
      width: 100%;
    }
  }
}
/* 关键样式：调整输入框高度为36px */
::v-deep .custom-form .el-input__inner {
  height: 36px!important;
  line-height: 36px!important;
}
::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell{
  background-color: transparent;
}
::v-deep .el-table--group, .el-table--border{
  border: none;
}

//::v-deep .el-table__header-wrapper tr {
//  height: 50px; /* 表头行高度 */
//}
//
//::v-deep .el-table th.el-table__cell > .cell {
//  line-height: 30px; /* 表头文字行高 */
//  padding: 10px 8px; /* 表头单元格内边距 */
//}
</style>
